<template>
  <div class="sort-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-left">
        <div class="current-location">当前位置</div>
        <span class="nav-title">白蚁防治</span>
      </div>
    </div>

    <!-- 标题栏 -->
    <div class="title-bar">
      <span class="title-text">白蚁防治企业</span>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 筛选按钮 -->
      <el-dropdown
        class="simple-filter-dropdown"
        trigger="click"
        placement="bottom-start"
        :append-to-body="false"
        @command="handleFilter"
      >
        <span class="simple-filter">
          {{ currentFilterLabel }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in filterOptions"
            :key="item.value"
            :command="item.value"
          >
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 表格区域：四个独立组件 -->
      <DefaultTable
        v-if="currentFilter === 'default'"
        :data="defaultTableData"
      />
      <HonorTable
        v-else-if="currentFilter === 'honor'"
        :data="honorTableData"
      />
      <PerformanceTable
        v-else-if="currentFilter === 'performance'"
        :data="performanceTableData"
      />
      <PraiseTable v-else :data="praiseTableData" />
    </div>
  </div>
</template>

<script>
import DefaultTable from "./components/DefaultTable.vue";
import HonorTable from "./components/HonorTable.vue";
import PerformanceTable from "./components/PerformanceTable.vue";
import PraiseTable from "./components/PraiseTable.vue";

export default {
  name: "Sort",
  components: {
    DefaultTable,
    HonorTable,
    PerformanceTable,
    PraiseTable,
  },
  data() {
    return {
      filterOptions: [
        { label: "默认排序", value: "default" },
        { label: "按荣誉", value: "honor" },
        { label: "按业绩", value: "performance" },
        { label: "按好评", value: "praise" },
      ],
      currentFilter: "default",
      // 各分类各自的数据源（后续可分别替换为真实接口返回）
      honorTableData: [
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 5,
          provincialHonorCount: 10,
          districtHonorCount: 15,
          associationHonorCount: 20,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 4,
          provincialHonorCount: 9,
          districtHonorCount: 14,
          associationHonorCount: 19,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 3,
          provincialHonorCount: 8,
          districtHonorCount: 13,
          associationHonorCount: 18,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 5,
          provincialHonorCount: 10,
          districtHonorCount: 15,
          associationHonorCount: 20,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 4,
          provincialHonorCount: 9,
          districtHonorCount: 14,
          associationHonorCount: 19,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 3,
          provincialHonorCount: 8,
          districtHonorCount: 13,
          associationHonorCount: 18,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 5,
          provincialHonorCount: 10,
          districtHonorCount: 15,
          associationHonorCount: 20,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 4,
          provincialHonorCount: 9,
          districtHonorCount: 14,
          associationHonorCount: 19,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 3,
          provincialHonorCount: 8,
          districtHonorCount: 13,
          associationHonorCount: 18,
        },
        {
          companyName: "上海山西物业管理有限公司",
          nationalHonorCount: 5,
          provincialHonorCount: 10,
          districtHonorCount: 15,
          associationHonorCount: 20,
        },
      ],
      performanceTableData: [
        { companyName: "上海山西物业管理有限公司", taskCount: 50 },
        { companyName: "上海山西物业管理有限公司", taskCount: 50 },
        { companyName: "上海山西物业管理有限公司", taskCount: 50 },
        { companyName: "上海山西物业管理有限公司", taskCount: 50 },
        { companyName: "上海山西物业管理有限公司", taskCount: 50 },
      ],
      praiseTableData: [
        { companyName: "上海山西物业管理有限公司", satisfactionRate: 0.95 },
        { companyName: "上海山西物业管理有限公司", satisfactionRate: 0.93 },
        { companyName: "上海山西物业管理有限公司", satisfactionRate: 0.9 },
      ],
      defaultTableData: Array.from({ length: 12 }).map(() => ({
        region: "浦东新区",
        companyName: "上海山西物业管理有限公司",
        address: "三林路738号 307室",
        contact: "02168940910, 02150111998",
        remark: "收费标准 查看情况",
      })),
    };
  },
  computed: {
    currentFilterLabel() {
      const found = this.filterOptions.find(
        (item) => item.value === this.currentFilter,
      );
      return found ? found.label : "筛选";
    },
  },
  methods: {
    handleFilter(command) {
      this.currentFilter = command;
    },
  },
};
</script>

<style lang="scss" scoped>
// 重置父容器样式影响
.sort-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

// 顶部导航栏
.top-navbar {
  flex-shrink: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .current-location {
    height: 32px;
    line-height: 32px;
    padding: 0 20px 0 16px;
    min-width: 100px;
    background-image: url("~@/assets/images/breadcrumbs-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .nav-title {
    font-size: 14px;
    color: #333;
    margin-left: 5px;
  }
}

// 标题栏
.title-bar {
  flex-shrink: 0;
  width: 100%;
  height: 50px;
  background-image: url("~@/assets/images/bluebg.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;

  .title-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-image: url("~@/assets/images/title01.jpg");
    background-repeat: no-repeat;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}

// 主内容区域
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

// 筛选区域
.simple-filter {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #1794dc;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;

  i {
    margin-left: 6px;
  }
}

.simple-filter-dropdown {
  position: relative;
  display: inline-block;
}
</style>
